<style>
html{background:transparent;}
body{
  margin: 0 auto;
  padding: 0;
  width: 66.18vh; /*13.6 : 9 ratio */
  height: 100vh;
  overflow:hidden;
 }
.background{
  width:100%;
  height:100%;
  background:rgba(0,0,0,0);
  background-size:cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center; 
  max-height: 100%;
  overflow: hidden;
  z-index:900;
}
.flake path{
  fill:#f292df;
}
.flake-wrapper{
  position:absolute;
  z-index:999;
}
@keyframes falling{
  0%{
    top:90%;
    opacity:0;
  }
  50%{
    opacity:1;
  }
  80%{
    opacity:0.3;
  }
  100%{
    top:-50px;
    opacity:0;
  }
}
.flake{
  width:100%;
  height:100%;
}
</style>
</head>
<body translate="no" >
<div class="background">
<div class="bg-opacity"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var  flake = '<svg class="flake" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 51.997 51.997" style="enable-background:new 0 0 51.997 51.997;" xml:space="preserve"><path  fill="#ff00b3" d="M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z M49.521,21.261c-0.984,4.172-3.265,7.973-6.59,10.985L25.855,47.481L9.072,32.25 c-3.331-3.018-5.611-6.818-6.596-10.99c-0.708-2.997-0.417-4.69-0.416-4.701l0.015-0.101C2.725,9.139,7.806,3.826,14.158,3.826 c4.687,0,8.813,2.88,10.771,7.515l0.921,2.183l0.921-2.183c1.927-4.564,6.271-7.514,11.069-7.514 c6.351,0,11.433,5.313,12.096,12.727C49.938,16.57,50.229,18.264,49.521,21.261z"/></svg>';
$(window).on("load", function () {
   TrigTimer();
});
var IntervalOne; var IntervalCounter = 0;
function TrigTimer() {
	IntervalOne = setInterval(function () {
		IntervalCounter++;
		create_snow_lake();
		remove_snow_lake();
		CheckCounter();
	}, 250);
}
function CheckCounter(){
	if( IntervalCounter > 100){
	StopTimer(); IntervalOne = "";
	
	};
}
function StopTimer() {
    clearInterval(IntervalOne);
    $(".flake-wrapper").each(function () {$(this).remove();});
	
	IntervalCounter = 0;
	ReloadTimer();
}
function ReloadTimer(){
	setTimeout(function(){TrigTimer()},2000)
}
function create_snow_lake() {
  var falling_time = Math.floor(Math.random() * 10) + 5;
  var flake_pos = Math.floor(Math.random() * 90) + 4;
  var flake_size = (Math.floor(Math.random() * 80) + 1) / 100;
  var snow_flake = "<div class='flake-wrapper' style='width:40px; left:" + flake_pos + "%;height:40px;transform:scale(" + flake_size + ");animation:falling " + falling_time + "s linear infinite'>" + flake + "</div>";
  $(snow_flake).appendTo(".background");
}
function remove_snow_lake() {
  $(".flake-wrapper").each(function () {
    var flake_pos = $(this).offset().top;
    var body_height = $(document).height() - 100;
	if(flake_pos < 100){$(this).remove();}
  });
  
}
